/**
 * 图形加载器
 *
 * Created by juleiy on 2017/4/12.
 */
import api from 'api/graph.js'
import echarts from 'libs/graph/echarts.min.js'

import Excel from 'utils/exportExcel.js'
// import Vue from 'vue'
require("bootstrap-table")
    //jq 圆形进度条
    // require("radialIndicator")


export default {

    /**
     * 初始化加载图形
     * @param  {[type]} args [description]
     * @return {[type]}      [description]
     */
    _init($ele, opt, params) {

        this.$content = $ele;
        this.configOption = opt; //配置信息
        if (params) {
            this.params = params; //全局入参
        } else {
            this.params = {};
        }
        if (opt["option"].params) {
            var newparams = eval("(" + opt["option"].params + ")");
            this.params = $.extend(this.params, newparams);
            this.params.length = newparams.length;
        }
        //item 列表历史数据 item-table 图形编号
        if (this.params['graphType'] == 'item-table') {
            this.configOption["option"]["isDateRange"] = 'true'
            if (this.configOption["chartType"] != 'grid_time') {
                this.configOption["chartType"] = this.configOption["chartType"] + "_time"
            }
        }
        this._setId();
        //加载图形
        this.loadChart();
    },

    _setId() {
        var elId = this.UUID();
        this.$content.attr("id", elId);
        this.contentId = elId;
    },
    /**
     * 加载图形
     *
     * 容器有3个部位
     * class graph-header 头部 用于渲染时间选择器
     * class graph-bodyer 体 用于渲染主体
     *h class graph-footer 脚 用于渲染单位/说明等
     *
     * 各类型自行安排使用
     *
     */
    loadChart() {
        var type = this.configOption["chartType"];
        if (type) {
            var callFunction = "this." + type + "_loader()";
            // try {
            eval(callFunction);
            // } catch (e) {
            //     console.error("加载图形" + type + "出错：" + e);
            //     alert("加载图形" + type + "出错：" + e);
            // }
        }
    },
    /**
     * 下面是各插件加载程序
     *
     * 加载程序由三部分组成
     * 1、LOADER_LIST {Array} 公布注册插件名称
     * 2、{type}_option {Array} 用于定义该插件需要的个性化属性，从this.opt.option中获取配置好的数据
     *
     * showName：
     *   展示名
     * name：
     *   键值
     * value：
     *  默认值
     *
     *      designer.js中将根据此属性渲染配置表单
     * 3、{type}_loader function 加载函数
     *
     */
    LOADER_LIST: [{
            id: 'text',
            value: '文本框'
        },
        {
            id: 'form',
            value: '表单'
        },
        {
            id: 'grid',
            value: '表格'
        }, {
            id: 'line',
            value: '折线图'
        }, {
            id: 'bar',
            value: '柱状图'
        },
        {
            id: 'stack_bar',
            value: '堆叠柱状图'
        },
        {
            id: 'pie',
            value: '饼图'
        },
        {
            id: 'gauge',
            value: '仪表盘'
        },
        {
            id: 'device',
            value: '设备概览'
        },
        {
            id: 'business',
            value: '业务概览'
        }
    ],
    /**
     * 公共属性
     * @type {Array}
     */
    PUBLIC_OPTION: [{
            "showName": "图形入参",
            "name": "params",
            "value": "",
            "desc": '图形的参数信息，用{v}表示关联图形传入数据值'
        }, {
            "showName": "背景颜色",
            "name": "backgroundColor",
            "value": "white",
            "desc": '背景颜色，css格式，如：white或者#fff或者rgb(255,255,255,255) 表示白色'
        }, {
            "showName": "字体颜色",
            "name": "fontColor",
            "value": "black",
            "desc": '字体颜色，css格式，如：white或者#fff或者rgb(255,255,255,255) 表示白色'
        },
        {
            "showName": "链接图形",
            "name": "relaNo",
            "value": "",
            "desc": '点击数据弹出显示的图形。'
        }
    ],

    /**
     * 文本框插件---text
     */
    //数据项--定义为函数，防止被外部修改
    text_option() {
        return [{
                "showName": "数据",
                "name": "value",
                "value": "",
                "desc": '文本框数据，可写固定数字，或者从数据源选择，如:200或者text-data=>value'
            },
            {
                "showName": "单位",
                "name": "unit",
                "value": "",
                "desc": '文本框数据的单位，如：个/秒/小时'
            }
        ];
    },
    //加载器
    text_loader() {
        var self = this;
        var $head = this.$content.find(".graph-header");
        var $body = this.$content.find(".graph-bodyer");
        var $foot = this.$content.find(".graph-footer");
        var opt = this.configOption["option"];
        //整体样式
        var $chart = this.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "background-color:#DDD"
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        //头部
        $head.text(this.configOption["chartName"]);
        //主体
        $body.css({
            padding: '10%',
            'font-size': '2em'
        });
        this.bindDailog(function(grsNo, params) {
            $body.css({
                'cursor': 'pointer'
            });
            $body.hover(function() {
                $(this).css({
                    "text-decoration": 'underline'
                });
            }, function() {
                $(this).css({
                    "text-decoration": ''
                });
            });
            $body.click(function(e) {
                if (params) {
                    params = params.replace('{v}', $body.text());
                }
                self.detailDialog(grsNo, params);
            });
        });
        //底部
        $foot.css({
            'text-align': 'right',
            'right': '10px',
            'bottom': '10px',
            'position': 'absolute',
            'font-size': '14px',
            'font-weight': 'bolder',
            'font-family': 'sans-serif',
            'overflow': 'hidden'
        }).html(opt["unit"]);
        //设置数据
        function setData() {
            self.getData(opt["value"], function(result) {
                var array = key.split(".");
                var val = 0;

                if (array.length == 2) {
                    try {
                        val = result[0][array["1"]]; //根据key获取数据
                    } catch (e) {
                        console.warn(e);
                    }
                }
                $body.text(val);
            }, "", this);
        }
        this.setTimer(this.configOption, $body, setData, this);
    },

    /**
     * 饼图---pie
     */
    //数据项--定义为函数，防止被外部修改
    pie_option() {
        return [{
                "showName": "系列名称",
                "name": "series",
                "value": "XX数据",
                "desc": '定义系列数据的名称，当鼠标移到图上会显示。如：告警数据'
            },
            {
                "showName": "固定图例",
                "name": "legend",
                "value": "['数据1', '数据2']",
                "desc": "固定方式定义饼图中数据种类的名字，数组格式，使用单引号，如：['数据1', '数据2']"
            },
            {
                "showName": "图例键值",
                "name": "legendkey",
                "value": "",
                "desc": "定义数据组使用数据源时，作为图例名称的键值，如：clevel"
            },
            {
                "showName": "数据来源",
                "name": "data",
                "value": "[{value: 335, name: '数据1'},{value: 310, name: '数据2'}]",
                "desc": "定义数据来源，可写定数据，也可选择数据源，如：[{value: 335, name: '数据1'},{value: 310, name: '数据2'}] 或者 pie-data=>value"
            },
            {
                "showName": "图例颜色",
                "name": "legendColor",
                "value": "{'数据1':'red', '数据2':'green'}",
                "desc": "固定方式定义图例的颜色，颜色支持标准css颜色，如：{'数据1':'red', '数据2':'green'}"
            }, {
                "showName": "图例颜色键值",
                "name": "colorKey",
                "value": "",
                "desc": "定义数据组使用数据源时，作为图例颜色的键值，如：color"
            }

        ];
    },
    //加载器
    pie_loader() {
        var $head = this.$content.find(".graph-header");
        var $body = this.$content.find(".graph-bodyer");
        var opt = this.configOption["option"];
        //整体样式
        var $chart = this.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        //头部
        $head.css({}).text(this.configOption["chartName"]);
        $body.css({
            'width': "100%",
            'height': "85%"
        }).empty();
        var self = this;

        var legend = [];
        var data = [];
        //渲染图形
        var option = {
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "",
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x: "left",
                y: "bottom",
                data: [],
                textStyle: {
                    color: opt["fontColor"] ? opt["fontColor"] : ""
                }
            },
            series: [{
                name: opt["series"],
                type: 'pie',
                radius: '68%',
                center: ['50%', '40%'],
                clockwise: false,
                data: [],
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        borderColor: '#ffffff',
                    },
                    emphasis: {
                        borderWidth: 0,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }],
            color: [
                '#00acee',
                '#52cdd5',
                '#79d9f1',
                '#a7e7ff',
                '#c8efff'
            ]
        };
        var chart = echarts.init($body[0]);
        this.bindDailog(function(grsNo, params) {
            chart.on('click', function(chartParams) {
                var thisparams = "";
                if (params) {
                    thisparams = params.replace('{v}', chartParams.name);
                }
                self.detailDialog(grsNo, thisparams);
            });
        });


        function loadPie() {
            option.legend.data = legend;
            option.series[0].data = data;
            chart.setOption(option);
        }

        function setData() {
            data = [];
            legend = [];
            var legendColor = [];
            if (opt["legendColor"] && opt["legendColor"] != "") {
                if (opt["data"].indexOf("[") == 0) {
                    legendColor = eval("(" + opt["legendColor"] + ")");
                }
            }
            //图例数据
            if (opt["legend"] && opt["legend"] != "") {
                if (opt["data"].indexOf("[") == 0) {
                    legend = eval("(" + opt["legend"] + ")");
                }
            }
            //系列数据
            if (opt["data"] && opt["data"] != "") {
                //写死的数据
                if (opt["data"].indexOf("[") == 0) {
                    data = eval("(" + opt["data"] + ")");
                    if (legendColor) {
                        for (var i = 0; i < data.length; i++) { //数组长度由图例图例决定
                            if (data[i]["name"] in legendColor) {
                                data[i].itemStyle = {
                                    normal: {
                                        color: legendColor[data[i]["name"]]
                                    }
                                };
                            }
                        }
                    }
                    loadPie();
                } else {
                    //获取初始数据
                    self.getData(opt["data"], function(result) {
                        var id_key = opt["data"];
                        var key = id_key.split(".")[1];
                        var legendkey = opt.legendkey;
                        var colorKey = opt.colorKey;
                        //根据legend图例重新组装系列数据
                        if (legend.length > 0) { //固定图例
                            for (var i = 0; i < legend.length; i++) { //数组长度由图例图例决定
                                legendkey = legend[i];
                                var value = result.filter(function(v) {
                                    var result = false;
                                    //遍历行值，如果存在返回该行
                                    for (var col in v) {
                                        if (v[col] == legendkey) {
                                            result = true;
                                        }
                                    }
                                    return result;
                                })[0][key];
                                var item = {
                                    "value": value,
                                    "name": legendkey
                                };
                                if (legendColor && (legendkey in legendColor)) {
                                    item.itemStyle = {
                                        normal: {
                                            color: legendColor[legendkey]
                                        }
                                    }
                                }
                                data.push(item);
                            }
                        } else { //动态图例
                            for (var i = 0; i < result.length; i++) { //数组长度由图例图例决定
                                var item = {
                                    "value": result[i][key],
                                    "name": result[i][legendkey]
                                };
                                if (colorKey && colorKey != '') { //指定图例颜色key
                                    item.itemStyle = {
                                        normal: {
                                            color: result[i][colorKey]
                                        }
                                    }
                                }
                                legend.push(result[i][legendkey]);
                                data.push(item);
                            }
                        }
                        loadPie();
                    });
                }
            }
        }
        this.setTimer(self.configOption, $body, setData, this);
    },
    /**
     * 柱状图---bar---
     */
    //数据项--定义为函数，防止被外部修改
    bar_option() {
        return this.line_option();
    },
    //加载器，和折线图一直，只是系列类型不同
    bar_loader() {
        return this.line_loader(true);
    },

    /**
     * 折线图---line-
     */
    //数据项--定义为函数，防止被外部修改
    line_option() {
        return [{
                "showName": "是否显示时间过滤器",
                "name": "isDateRange",
                "value": "false",
                "desc": "定义是否显示时间过滤器，如：false或者true，默认为false"
            }, {
                "showName": "X轴键值",
                "name": "timeKey",
                "value": "",
                "desc": "定义当数据来源中存在数据源时，X轴数据使用的键值，如：clock"
            },
            {
                "showName": "数据信息",
                "name": "seriesdata",
                "value": "[{id:'1',name:'name1',data:['200', '300'],color:'#00acee'}]",
                "desc": "定义数据信息，包括id，名称，数据来源，数据来源（data）部分可写定数据，也可选择数据源，如：[{id:'1',name:'name1',data:['200', '300'],color:'#00acee'}] 或者 [{id:'1',name:'name1',data:'line-data=>value'}]"
            },
            {
                "showName": "数据单位",
                "name": "unit",
                "value": "",
                "desc": "定义数据的单位，显示在Y轴上，如：kB"
            },
            {
                "showName": "面积",
                "name": "area",
                "value": "false",
                "desc": "定义折线图是否展示面积，如：false或者true，默认为false"
            }
        ];
    },
    //加载器
    line_loader(isBar) {
        var $head = this.$content.find(".graph-header");
        var $body = this.$content.find(".graph-bodyer");
        var $foot = this.$content.find(".graph-footer");
        var self = this;
        var opt = this.configOption["option"];
        //整体样式
        var $chart = this.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        //头部
        $head.css({}).text(this.configOption["chartName"]);
        //echart不接受百分比宽度和高度，此处获取外部容器属性设置
        $body.css({
            'width': "100%",
            'height': "90%"
        });
        var chart = echarts.init($body[0]);
        this.bindDailog(function(grsNo, params) {
            chart.on('click', function(chartParams) {
                var thisparams = "";
                if (params) {
                    thisparams = params.replace('{v}', chartParams.name);
                }
                self.detailDialog(grsNo, thisparams);
            });
        });

        var data = [];
        var xAxis = {
            // type: 'category',
            // boundaryGap: false,
            axisLabel: {
                margin: 0
            },
            splitLine: { //网格线
                show: true,
                lineStyle: {
                    color: ['#b1b1b1'],
                    type: 'dashed'
                }
            },
            data: [],
            axisLine: {
                lineStyle: {
                    color: opt["fontColor"] ? opt["fontColor"] : ""
                }
            }
        };
        var series = [];
        var legend = {
            x: 'center',
            data: [],
            textStyle: {
                color: opt["fontColor"] ? opt["fontColor"] : ""
            }
        };


        var yAxis = {
            axisLine: {
                lineStyle: {
                    color: opt["fontColor"] ? opt["fontColor"] : ""
                }
            },
            splitArea: { show: true }
        };
        var option = {
            textStyle: {
                'color': opt["fontColor"] ? opt["fontColor"] : ""
            },
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "",
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                backgroundColor: 'rgba(245, 245, 245, 0.8)',
                borderWidth: 1,
                borderColor: '#ccc',
                padding: 10,
                textStyle: {
                    color: '#000'
                },
                //  position: function (pos, params, el, elRect, size) {
                //      var obj = {top: 10};
                //      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                //      return obj;
                //  },
                //  extraCssText: 'width: 170px',
                //  formatter: function (params, ticket, callback) {
                //       $.get('detail?name=' + params.name, function (content) {
                //           callback(ticket, toHTML(content));
                //       });
                //       return 'Loading';
                //   }

            },
            grid: {
                top: 50,
                bottom: 30
            },
            legend: legend,
            xAxis: xAxis,
            yAxis: yAxis,
            series: series,
            color: [
                '#9999EF',
                '#77FFCC',
                '#FFDD55',
                '#DDFF77',
                '#66FF66',
                '#FFA488',
                '#9999EF',
                '#FFFF77',
                '#E93EEF',
                '#BBFF66',
                '#FFBB66',
                '#E38EEF',
                '#FF8888',
                '#FF77FF'
            ]
        };
        if (!isBar) {
            option.dataZoom = [{
                type: 'inside',
                start: 0,
                end: 100
            }];
        }
        if (opt["isDateRange"] == 'true') {
            var picker = this.generateDatePicker($head);
            picker.setTrigger(setData, this);
        }
        //解析数据[{"系列名称1":[数据]},{"系列名称2":[数据]}],先提取legnd图例，再获取数据，x轴按时间生成，数据以此为准
        var seriesData = eval('(' + opt['seriesdata'] + ')'); //原始数据
        var standardSeriesData = []; //标准系列格式
        //获取legend
        for (var seriseIndex = 0; seriseIndex < seriesData.length; seriseIndex++) {
            var thisSeries = seriesData[seriseIndex];
            //渲染图表
            var thisId = this.getParam(thisSeries["id"]);
            var thisName = this.getParam(thisSeries["name"]);
            var thisUnit = this.getParam(thisSeries["unit"]);
            var thisData = this.getParam(thisSeries["data"]);
            var id, name, unit, data;

            if ((typeof thisId) == "object") //如果是数组对象（值接受数组对象）。是数组就循环
            {
                if (thisId.length) {
                    for (var thisIdIndex = 0; thisIdIndex < thisId.length; thisIdIndex++) {
                        id = thisId[thisIdIndex];
                        name = (((typeof thisName) == 'object') ? thisName[thisIdIndex] : thisName);
                        unit = (((typeof thisUnit) == 'object') ? thisUnit[thisIdIndex] : thisUnit);
                        data = (((typeof thisData) == 'object') ? thisData[thisIdIndex] : thisData);

                        setSerise(thisSeries["id"], id, name, unit, data, thisSeries);
                    }
                }
            } else { //字符串直接设置
                setSerise(thisSeries["id"], thisId, thisName, thisUnit, thisData, thisSeries);
            }
        }

        var timeKey = opt["timeKey"];
        //时间轴为写死的数据
        if (timeKey && timeKey.charAt(0) == '[') {
            timeKey = eval("(" + timeKey + ")");
            xAxis.data = timeKey;
        }

        function setSerise(idName, idValue, name, unit, data, obj) {
            yAxis.axisLabel = {
                formatter: function(value, index) {
                    var v = value;
                    if (parseInt(value) != isNaN) {
                        if (value / 1000000000 > 1) {
                            v = (value / 1000000000).toFixed(2) + "G";
                        } else if (value / 1000000 > 1) {
                            v = (value / 1000000).toFixed(2) + "M";
                        } else if (length / 1000 > 1) {
                            v = (value / 1000).toFixed(2) + "K";
                        }
                    }
                    if (unit) {
                        v = v + unit;
                    } else {
                        if (opt["unit"]) {
                            v = v + opt["unit"];
                        }
                    }
                    return v;
                }
            }

            var seriesTmpl = {
                name: name,
                connectNulls: true,
                type: isBar ? 'bar' : 'line',
                data: [],
                itemStyle: {
                    normal: {
                        color: obj["color"] ? obj["color"] : ""
                    }
                },
                label: {
                    normal: {
                        show: isBar,
                        position: 'top',
                        formatter: function(params) {
                            var value = params.value;
                            var v = value;
                            if (parseInt(value) != isNaN) {
                                if (value / 1000000000 > 1) {
                                    v = (value / 1000000000).toFixed(2) + "G";
                                } else if (value / 1000000 > 1) {
                                    v = (value / 1000000).toFixed(2) + "M";
                                } else if (length / 1000 > 1) {
                                    v = (value / 1000).toFixed(2) + "K";
                                }
                            }
                            if (unit) {
                                v = v + unit;
                            } else {
                                if (opt["unit"]) {
                                    v = v + opt["unit"];
                                }
                            }
                            return v;
                        }
                    }
                }
            };
            if (opt["area"] == 'true') {
                seriesTmpl.areaStyle = {
                    normal: {}
                };
            }
            series.push(seriesTmpl)
            legend.data.push(name);
            standardSeriesData.push({
                idName: idName,
                idValue: idValue,
                name: name,
                data: data
            });
        }
        //设置数据
        function setData(loopFlag) {
            var queryParam = {};
            if (this.params) {
                queryParam = this.deepCopy(this.params);
            }
            //对于循环的标志,时间选择器选择的是近一天的数据，发起请求，不然不再次请求保证性能
            if (opt["isDateRange"] == 'true') {
                if (loopFlag) {
                    if (picker.getRange() <= 1) {
                        queryParam.startDate = picker.getStartDate();
                        queryParam.startTimeStamp = picker.getStartTimeStamp();
                        var nowDate = new Date();
                        queryParam.endDate = formatDate(nowDate);
                        queryParam.endTimeStamp = Math.ceil(nowDate.getTime() / 1000);
                    } else {
                        return false;
                    }
                } else {
                    queryParam.startDate = picker.getStartDate();
                    queryParam.endDate = picker.getEndDate();
                    queryParam.startTimeStamp = picker.getStartTimeStamp();
                    queryParam.endTimeStamp = picker.getEndTimeStamp();
                }
                //当天展示95%之后的数据，其他趋势数据展示全部
                if (!isBar) {
                    if (picker.getRange() == 0) {
                        option.dataZoom[0].start = 0;
                    } else {
                        option.dataZoom[0].start = 0;
                    }
                }
            }

            //提取数据
            for (var si = 0; si < standardSeriesData.length; si++) {
                var nowId = standardSeriesData[si]["idName"];

                //把当前系列的ID传入后台,做为查询条件
                if (nowId.indexOf("#{") >= 0) {
                    //截取掉#{}后，还要替换掉标记字符串 |> ... <|
                    var paramIdName = nowId.substr(2, nowId.length - 3);
                    if (paramIdName.indexOf("|>") > -1 && paramIdName.indexOf("<|") > 0) {
                        var flagStr = paramIdName.substr(paramIdName.indexOf("|>"), paramIdName.indexOf("<|") - paramIdName.indexOf("|>") + 2);
                        paramIdName = paramIdName.replace(flagStr, "");
                    }
                    queryParam[paramIdName] = standardSeriesData[si]["idValue"];
                }
                //把当前的序号传入回调函数，不然回到的时候si已经跑完了
                self.getData(standardSeriesData[si]["data"], function(result, key, serizesIndex) {

                    series[serizesIndex].data = self.formatKeytoData(result, key);
                    if ((typeof timeKey) == "string") {
                        xAxis.data = self.formatKeytoData(result, timeKey);
                    }
                    //渲染图形
                    chart.setOption(option);
                }, si, this, queryParam); //传入si
            }
        }

        function formatDate(d) {
            return "" + (d.getFullYear().toString()) + "-" + (d.getMonth() + 1) + "-" + (d.getDate()) + " " + (d.getHours()) + ":" + (d.getMinutes()) + ":" + (d.getSeconds());
        }
        //定时
        self.setTimer(self.configOption, $body, setData, this);
    },


    /**
     * 堆叠柱状图
     */
    //数据项--定义为函数，防止被外部修改
    stack_bar_option() {
        return [{
                "showName": "Y轴键值",
                "name": "yKey",
                "value": "",
                "desc": "定义当数据来源中存在数据源时，Y轴数据使用的键值，如：clock"
            },
            {
                "showName": "数据信息",
                "name": "seriesdata",
                "value": "[{id:'1',name:'name1',data:['200', '300'],color:'#00acee'}]",
                "desc": "定义数据信息，包括id，名称，数据来源，数据来源（data）部分可写定数据，也可选择数据源，如：[{id:'1',name:'name1',data:['200', '300'],color:'#00acee'}] 或者 [{id:'1',name:'name1',data:'line-data=>value'}]"
            }
        ];
    },
    //加载器
    stack_bar_loader(isBar) {
        var $head = this.$content.find(".graph-header");
        var $body = this.$content.find(".graph-bodyer");
        var $foot = this.$content.find(".graph-footer");
        var self = this;
        var opt = this.configOption["option"];
        //整体样式
        var $chart = this.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        //头部
        $head.css({}).text(this.configOption["chartName"]);
        //echart不接受百分比宽度和高度，此处获取外部容器属性设置
        $body.css({
            'width': "100%",
            'height': "90%"
        });
        var chart = echarts.init($body[0]);
        var data = [];
        var series = [

        ];
        var legend = {
            data: []
        };


        var yAxis = {
            type: 'category',
            data: []
        };
        var option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: legend,
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: yAxis,
            series: series
        };
        //解析数据[{"系列名称1":[数据]},{"系列名称2":[数据]}],先提取legnd图例，再获取数据，x轴按时间生成，数据以此为准
        var seriesData = eval('(' + opt['seriesdata'] + ')'); //原始数据
        var standardSeriesData = []; //标准系列格式
        //获取legend
        for (var seriseIndex = 0; seriseIndex < seriesData.length; seriseIndex++) {
            var thisSeries = seriesData[seriseIndex];
            //渲染图表
            var thisId = this.getParam(thisSeries["id"]);
            var thisName = this.getParam(thisSeries["name"]);
            var thisUnit = this.getParam(thisSeries["unit"]);
            var thisData = this.getParam(thisSeries["data"]);
            var id, name, unit, data;

            if ((typeof thisId) == "object") //如果是数组对象（值接受数组对象）。是数组就循环
            {
                if (thisId.length) {
                    for (var thisIdIndex = 0; thisIdIndex < thisId.length; thisIdIndex++) {
                        id = thisId[thisIdIndex];
                        name = (((typeof thisName) == 'object') ? thisName[thisIdIndex] : thisName);
                        unit = (((typeof thisUnit) == 'object') ? thisUnit[thisIdIndex] : thisUnit);
                        data = (((typeof thisData) == 'object') ? thisData[thisIdIndex] : thisData);

                        setSerise(thisSeries["id"], id, name, unit, data, thisSeries);
                    }
                }
            } else { //字符串直接设置
                setSerise(thisSeries["id"], thisId, thisName, thisUnit, thisData, thisSeries);
            }
        }

        var yKey = opt["yKey"];
        //时间轴为写死的数据
        if (yKey && yKey.charAt(0) == '[') {
            yKey = eval("(" + yKey + ")");
            yAxis.data = yKey;
        }

        function setSerise(idName, idValue, name, unit, data, obj) {
            var seriesTmpl = {
                name: name,
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [],
                itemStyle: {
                    normal: {
                        color: obj["color"] ? obj["color"] : ""
                    }
                },
            };

            series.push(seriesTmpl)
            legend.data.push(name);
            standardSeriesData.push({
                idName: idName,
                idValue: idValue,
                name: name,
                data: data
            });
        }
        //设置数据
        function setData(loopFlag) {
            var queryParam = {};
            if (this.params) {
                queryParam = this.deepCopy(this.params);
            }


            //提取数据
            for (var si = 0; si < standardSeriesData.length; si++) {
                var nowId = standardSeriesData[si]["idName"];
                //把当前系列的ID传入后台,做为查询条件
                if (nowId.indexOf("#{") >= 0) {
                    //截取掉#{}后，还要替换掉标记字符串 |> ... <|
                    var paramIdName = nowId.substr(2, nowId.length - 3);
                    if (paramIdName.indexOf("|>") > -1 && paramIdName.indexOf("<|") > 0) {
                        var flagStr = paramIdName.substr(paramIdName.indexOf("|>"), paramIdName.indexOf("<|") - paramIdName.indexOf("|>") + 2);
                        paramIdName = paramIdName.replace(flagStr, "");
                    }
                    queryParam[paramIdName] = standardSeriesData[si]["idValue"];
                }
                //把当前的序号传入回调函数，不然回到的时候si已经跑完了
                self.getData(standardSeriesData[si]["data"], function(result, key, serizesIndex) {

                    series[serizesIndex].data = self.formatKeytoData(result, key);
                    if ((typeof yKey) == "string") {
                        yAxis.data = self.formatKeytoData(result, yKey);
                    }
                    //渲染图形
                    chart.setOption(option);
                }, si, this, queryParam); //传入si
            }
        }

        //定时
        self.setTimer(self.configOption, $body, setData, this);
    },



    /**
     * 仪表盘---gauge
     */
    //数据项--定义为函数，防止被外部修改
    gauge_option() {
        return [{
                "showName": "系列名称",
                "name": "series",
                "value": "XX数据",
                "desc": '定义系列数据的名称，当鼠标移到图上会显示。如：告警数据'
            },
            {
                "showName": "数据",
                "name": "data",
                "value": "50",
                "desc": '定义数据，可写固定数字，或者从数据源选择，如:200或者text-data=>value'
            }
        ];
    },
    //加载器
    gauge_loader() {
        var $head = this.$content.find(".graph-header");
        var $body = this.$content.find(".graph-bodyer");
        var opt = this.configOption["option"];
        //整体样式
        var $chart = this.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        //头部
        $head.css({}).text(this.configOption["chartName"]);
        //echart不接受百分比宽度和高度，此处进行直接设置
        $body.css({
            'width': "100%",
            'height': "90%",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        });


        //渲染图形
        function detectionData(str) {
            // var color = '#5eb95e';
            // if (str >= 30 && str <= 60) {
            //   color = '#F37B1D';
            // } else if (str > 60) {
            //   color = '#dd514c';
            // }
            var color = '#dd514c';
            if (str >= 30 && str <= 80) {
                color = '#F37B1D';
            } else if (str > 80) {
                color = '#5eb95e';
            }
            return color;
        }

        var option = {
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "",
            "tooltip": {
                "formatter": "{a} <br/>{b} : {c}%"
            },
            "series": [{
                "name": opt["series"],
                "type": "gauge",
                "splitNumber": 5,
                "center": ["50%", "60%"],
                "axisLine": {
                    "lineStyle": {
                        "color": [
                            [0.31, "#F37B1D"],
                            [1, "#e9ecf3"]
                        ],
                        "width": -10
                    }
                },
                "axisTick": {
                    "lineStyle": {
                        "color": "#3bb4f2",
                        "width": 3
                    },
                    "length": 15,
                    "splitNumber": 1
                },
                "axisLabel": {
                    "distance": -10,
                    textStyle: {
                        color: opt["fontColor"] ? opt["fontColor"] : ""
                    }
                },
                "splitLine": {
                    "show": false
                },
                "itemStyle": {
                    "normal": {
                        "color": "#494f50"
                    }
                },
                "detail": {
                    "formatter": "{value}%",
                    "offsetCenter": [0, "60%"],
                    "textStyle": {
                        "fontSize": 18,
                        "color": "#F37B1D"
                    }
                },
                "data": [{
                    "name": "",
                    "value": 0
                }]
            }]
        };
        var chart = echarts.init($body[0]);
        chart.setOption(option, true);

        var value = 0;

        function setData() {
            option.series[0].data[0].value = value;
            option.series[0].axisLine.lineStyle.color[0][0] = value / 100;
            option.series[0].axisLine.lineStyle.color[0][1] = detectionData(value);
            chart.setOption(option, true);
        }
        var self = this;
        self.setTimer(self.configOption, $body, function() {
            var key = opt["data"];
            self.getData(key, function(result) {
                var array = key.split(".");
                if (array.length == 2) {
                    value = result[0][array["1"]]; //根据key获取数据
                } else {
                    value = key;
                }
                setData();
            });
        }, this);
    },


    /**
     * 表格---grid
     */
    //数据项--定义为函数，防止被外部修改
    grid_option() {
        return [{
                "showName": "表格高度",
                "name": "height",
                "value": "200",
                "desc": '定义表格的高度，根据模块高度进行调整。如：200'
            },
            {
                "showName": "字段组（filed-对面数据源的键值；title-显示名称）",
                "name": "fields",
                "value": "{field:'name', title:'姓名'},{field: 'sex', title:'性别'}",
                "desc": "定义表格列的属性，field对应数据的name，title为显示名称。数组格式如：[{field:'name', title:'姓名'},{field: 'sex', title:'性别'}]"
            },
            {
                "showName": "数据源",
                "name": "data",
                "value": "[{name:'张三',sex:'男'},{name: '李四', sex: '男'}]",
                "desc": "定义表格列的数据源，可写定数据，或选择数据源。如：[{name:'张三',sex:'男'},{name: '李四', sex: '男'}]或者grid-data=>name,sex"
            },
            {
                "showName": "html表格",
                "name": "htmlData",
                "value": "",
                "desc": "适用于服务端生产html数据，如：<table>......</table>或者grid-data=>htmldata"
            }
        ];
    },
    //加载器
    grid_loader() {
        var $body = this.$content.find(".graph-bodyer");
        var opt = this.configOption["option"];
        var $head = this.$content.find(".graph-header");
        //echart不接受百分比宽度和高度，此处进行直接设置
        var id = this.UUID();
        var self = this;
        //整体样式
        var $chart = this.$content;
        //添加导出按钮
        let anum = $chart.find('a').length
        let closenum = $chart.find('.gs-close').length
        anum = anum - closenum
        let $a = $('<a href="javascript:;" style="position: absolute;top: 5px;right: ' + (25 + anum * 15) + 'px;font-size: 10px;display: inline;z-index: 9999" title="导出"><i class="icon_excel"></i></a>')
        $chart.prepend($a)

        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);

        let chartName = this.configOption["chartName"]
            //头部
        $head.css({

        }).text(chartName);


        //直接生成html
        if (opt['htmlData'] && opt['htmlData'] != '') {
            var config_htmlData = opt['htmlData'];
            if (config_htmlData.indexOf("<") >= 0) {
                setData(config_htmlData);
            } else {
                this.getData(config_htmlData, function(result) {
                    var value = "";
                    var array = config_htmlData.split(".");
                    if (array.length == 2) {
                        value = result[0][array["1"]]; //根据key获取数据
                    }
                    setData(value);
                });
            }

            function setData(html) {
                $body.css({
                    'width': "95%",
                    'height': "80%",
                    'padding': '50px',
                    'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "",
                    'visibility': 'hidden' //渲染前不可见。注意不能是hide，因为渲染是要根据高度计算
                        // "margin-top": '-25px'
                }).empty().html(html).css({
                    'visibility': 'visible'
                }); //渲染完成后显示
            }
        } else {
            var gridData = [];

            function setData() {
                if (opt["data"].indexOf("[") == 0) {
                    gridData = eval("(" + opt["data"] + ")");
                    //导出按钮的数据
                    $a[0]['datas'] = gridData
                    loadGrid();
                } else {
                    self.getData(opt["data"], function(result) {
                        gridData = self.formatKeytoData(result, opt["data"]);
                        //导出按钮的数据
                        $a[0]['datas'] = gridData
                        loadGrid();
                    });
                }
            }
            var table;

            function loadGrid() {
                var buildStr = '<table id="' + id + '" style="font-size:12px" ></table>';;
                //如果没有配置字段，使用gridData的字段
                var configcol = [];
                if (!(opt["fields"] && opt["fields"] != "")) {
                    var data1 = gridData[0];
                    for (var key in data1) {
                        configcol.push({
                            "field": key,
                            "title": key
                        });
                    }
                } else {
                    configcol = configcol.concat(eval("([" + opt["fields"] + "])"));

                }
                var tableCol = [{
                    //field: 'index',//可不加
                    title: '序号', //标题  可不加
                    formatter: function(value, row, index) {
                        return index + 1;
                    }
                }];
                /**
                 * 处理生成超链接
                 * @param  {[type]} item [description]
                 * @return {[type]}      [description]
                 */
                $.grep(configcol, function(item) {
                    tableCol.push({
                        "field": item["field"],
                        "title": item["title"],
                        "clickToSelect": true,
                        "sortable": true,
                        formatter: function(value, row, index) {
                            if (item["url"]) {
                                var result = '<a href="javascript:;" data="' + item["url"] + '">' + value + '</a>';
                                return result;
                            } else {
                                return value;
                            }
                        }
                    });

                });
                let headers = []
                for (let item of tableCol) {
                    headers.push({
                        v: item.field,
                        name: item.title
                    })
                }
                //导出按钮的数据标题
                $a[0]['headers'] = headers
                $a[0]['fileName'] = chartName + '.xlsx'
                $a.on('click', function() { //导出按钮绑定事件
                    let datas = $(this)[0]['datas']
                    let headers = $(this)[0]['headers']
                    let fileName = $(this)[0]['fileName']
                    if (headers && fileName && datas) {
                        let obj = {
                            datas: datas,
                            fileName: fileName, //导出文件名
                            headers: headers, //标题对象数组  {v:'',name:''} 格式
                            dataFunc: function() { //导出全部的查询方法
                            },
                            params: [], //查询参数  需要安照function的参数顺序
                            dataFunc2: function() { //导出全部的分页查询方法
                            },
                            params2: [] //分页查询参数 需要安照function的参数顺序
                        }
                        Excel.exportAll(obj).then((success) => {
                                console.log('ok')
                            })
                            .catch((err) => {
                                console.error(err)
                            })
                    }
                });

                var $table = $(buildStr);
                $body.css({
                    'width': "100%",
                    'height': "80%",
                    'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "",
                    'visibility': 'hidden' //渲染前不可见。注意不能是hide，因为渲染是要根据高度计算
                }).empty().append($table);

                var settings = {
                    "data": gridData,
                    "columns": tableCol,
                    striped: true,
                    classes: 'table table-hover',
                    pagination: true,
                    height: $body.height(),
                    search: true,
                    searchOnEnterKey: true,
                    onClickCell: function(field, value, row, $element) {
                        var url = $element.find("a").attr("data");
                        if (url) {
                            self.detailDialog(url, JSON.stringify(row));
                        }
                    }
                };
                if (table) {
                    table.bootstrapTable('destroy');
                }
                table = $table.bootstrapTable(settings);
                table.find('tbody tr td').css('text-align', 'center');
                $body.css({
                    'visibility': 'visible'
                }); //渲染完成后显示
            }


            this.setTimer(this.configOption, $body, setData, this);

        }
    },
    //加载器
    grid_time_loader() {
        var $body = this.$content.find(".graph-bodyer");
        var opt = this.configOption["option"];
        var $head = this.$content.find(".graph-header");
        //echart不接受百分比宽度和高度，此处进行直接设置
        var id = this.UUID();
        var self = this;
        //整体样式
        var $chart = this.$content;
        //添加导出按钮
        let $a
        if ($chart.find('.icon_excel').length == 0) {
            let anum = $chart.find('a').length
            let closenum = $chart.find('.gs-close').length
            anum = anum - closenum
            $a = $('<a href="javascript:;" style="position: absolute;top: 5px;right: ' + (25 + anum * 15) + 'px;font-size: 10px;display: inline;z-index: 9999" title="导出"><i class="icon_excel"></i></a>')
            $chart.prepend($a)
        } else {
            $a = $chart.find('i.icon_excel').parent();
        }

        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);

        let chartName = '历史数据' //this.configOption["chartName"]
            //头部
        $head.css({

        }).text(chartName);


        var gridData = [];

        // 时间选择器
        if (opt["isDateRange"] == 'true') {
            var picker = this.generateDatePicker($head);
            picker.setTrigger(setData, this);
        }

        function setData(loopFlag) {
            var queryParam = {};
            if (this.params) {
                queryParam = this.deepCopy(this.params);
            }
            //对于循环的标志,时间选择器选择的是近一天的数据，发起请求，不然不再次请求保证性能
            if (opt["isDateRange"] == 'true') {
                if (loopFlag) {
                    if (picker.getRange() <= 1) {
                        queryParam.startDate = picker.getStartDate();
                        queryParam.startTimeStamp = picker.getStartTimeStamp();
                        var nowDate = new Date();
                        queryParam.endDate = formatDate(nowDate);
                        queryParam.endTimeStamp = Math.ceil(nowDate.getTime() / 1000);
                    } else {
                        return false;
                    }
                } else {
                    queryParam.startDate = picker.getStartDate();
                    queryParam.endDate = picker.getEndDate();
                    queryParam.startTimeStamp = picker.getStartTimeStamp();
                    queryParam.endTimeStamp = picker.getEndTimeStamp();
                }
            }
            //设置数据
            self.getData(opt["data"], function(result) {
                gridData = self.formatKeytoData(result, opt["data"]);
                //导出按钮的数据
                $a[0]['datas'] = gridData
                loadGrid();
            }, 0, this, queryParam);
        }

        function formatDate(d) {
            return "" + (d.getFullYear().toString()) + "-" + (d.getMonth() + 1) + "-" + (d.getDate()) + " " + (d.getHours()) + ":" + (d.getMinutes()) + ":" + (d.getSeconds());
        }
        var table;

        function loadGrid() {
            var buildStr = '<table id="' + id + '" style="font-size:12px" ></table>';;
            //如果没有配置字段，使用gridData的字段
            var configcol = [];
            if (!(opt["fields"] && opt["fields"] != "")) {
                var data1 = gridData[0];
                for (var key in data1) {
                    configcol.push({
                        "field": key,
                        "title": key
                    });
                }
            } else {
                configcol = configcol.concat(eval("([" + opt["fields"] + "])"));

            }
            var tableCol = [{
                //field: 'index',//可不加
                title: '序号', //标题  可不加
                formatter: function(value, row, index) {
                    return index + 1;
                }
            }];
            /**
             * 处理生成超链接
             * @param  {[type]} item [description]
             * @return {[type]}      [description]
             */
            $.grep(configcol, function(item) {
                tableCol.push({
                    "field": item["field"],
                    "title": item["title"],
                    "clickToSelect": true,
                    "sortable": true,
                    "align": "center",
                    "halign": "center",
                    "falign": "center",
                    "valign": "middle",
                    formatter: function(value, row, index) {
                        if (item["url"]) {
                            var result = '<a href="javascript:;" data="' + item["url"] + '">' + value + '</a>';
                            return result;
                        } else {
                            return value;
                        }
                    }
                });

            });
            let headers = []
            for (let item of tableCol) {
                headers.push({
                    v: item.field,
                    name: item.title
                })
            }
            //导出按钮的数据标题
            $a[0]['headers'] = headers
            $a[0]['fileName'] = chartName + '.xlsx'
            $a.on('click', function() { //导出按钮绑定事件
                let datas = $(this)[0]['datas']
                let headers = $(this)[0]['headers']
                let fileName = $(this)[0]['fileName']
                if (headers && fileName && datas) {
                    let obj = {
                        datas: datas,
                        fileName: fileName, //导出文件名
                        headers: headers, //标题对象数组  {v:'',name:''} 格式
                        dataFunc: function() { //导出全部的查询方法
                        },
                        params: [], //查询参数  需要安照function的参数顺序
                        dataFunc2: function() { //导出全部的分页查询方法
                        },
                        params2: [] //分页查询参数 需要安照function的参数顺序
                    }
                    Excel.exportAll(obj).then((success) => {
                            console.log('ok')
                        })
                        .catch((err) => {
                            console.error(err)
                        })
                }
            });

            var $table = $(buildStr);
            $body.css({
                'width': "100%",
                'height': "80%",
                'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "",
                'visibility': 'hidden' //渲染前不可见。注意不能是hide，因为渲染是要根据高度计算
            }).empty().append($table);

            var settings = {
                "data": gridData,
                "columns": tableCol,
                striped: true,
                classes: 'table table-hover',
                pagination: true,
                height: $body.height(),
                search: false,
                searchOnEnterKey: true,
                onClickCell: function(field, value, row, $element) {
                    var url = $element.find("a").attr("data");
                    if (url) {
                        self.detailDialog(url, JSON.stringify(row));
                    }
                }
            };
            if (table) {
                table.bootstrapTable('destroy');
            }
            table = $table.bootstrapTable(settings);
            table.find('tbody tr td').css('text-align', 'center');
            $body.css({
                'visibility': 'visible'
            }); //渲染完成后显示
        }


        this.setTimer(this.configOption, $body, setData, this);

    },
    /**
     * 表单---form
     */
    //数据项--定义为函数，防止被外部修改
    form_option() {
        return [{
                "showName": "字段组",
                "name": "fields",
                "value": "{field:'a', title:'设备名称'},{field: 'b', title:'SNMP端口'},{field: 'c', title:'版本'},{field: 'd', title:'类型'}",
                "desc": "定义表单字段属性，filed-对面数据源的键值；title-显示名称，如：{field:'a', title:'设备名称'},{field: 'b', title:'SNMP端口'}"
            },
            {
                "showName": "数据源",
                "name": "data",
                "value": "[{a:'10.1.1.32',b:'161',c:'V1',d:'三层交换机'}]",
                "desc": "定义表格列的数据源，可写定数据，或选择数据源。如：[{a:'10.1.1.32',b:'161',c:'V1',d:'三层交换机'}]或者form-data=>a,b,c,d"
            },
            {
                "showName": "html表单",
                "name": "htmlData",
                "value": "",
                "desc": "适用于服务端生产html数据，如：<form>......</form>或者form-data=>htmldata"
            }
        ];
    },
    //加载器
    form_loader() {
        var $body = this.$content.find(".graph-bodyer");
        var opt = this.configOption["option"];
        //整体样式
        var $chart = this.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        var $head = this.$content.find(".graph-header");
        //echart不接受百分比宽度和高度，此处进行直接设置
        var id = this.UUID();
        //头部
        $head.css({}).text(this.configOption["chartName"]);;
        $body.css({
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "",
            width: '100%',
            height: '100%',
            'visibility': 'hidden' //渲染前不可见。注意不能是hide，因为渲染是要根据高度计算
        }).empty();
        //直接生成html
        if (opt['htmlData'] && opt['htmlData'] != '') {
            var config_htmlData = opt['htmlData'];
            if (config_htmlData.indexOf("<") >= 0) {
                setData(config_htmlData);
            } else {
                this.getData(config_htmlData, function(result) {
                    var value = "";
                    var array = config_htmlData.split(".");
                    if (array.length == 2) {
                        value = result[0][array["1"]]; //根据key获取数据
                    }
                    setData(value);
                });
            }

            function setData(html) {
                $body.html(html).css({
                    'visibility': 'visible'
                }); //渲染完成后显示
            }
        } else {
            var gridData = [];
            if (opt["data"].indexOf("[") == 0) {
                gridData = eval("(" + opt["data"] + ")");
                setData();
            } else {
                this.getData(opt["data"], function(result) {
                    gridData = result;
                    setData();
                });
            }

            function setData() {
                var buildStr = '<table style="margin: auto; font-size:12px;table-layout:fixed; min-width:100%;"><thead><tr> <td style="height:10px"></td></tr></thead><tbody>'
                if (opt["fields"] && opt["fields"] != "") {
                    var configcol = eval("([" + opt["fields"] + "])");
                    if (configcol && configcol.length > 0) {
                        $.grep(configcol, function(item) {
                            buildStr = buildStr + '<tr><td style="padding:5px;word-break: keep-all;">' + item['title'] + '：</td>';
                            var value = gridData[0] ? gridData[0][item['field']] : "----";
                            buildStr = buildStr + '<td style="padding:5px;">' + value + '</td></tr>';
                        });
                    }
                } else {
                    var configcol = gridData[0];
                    for (var key in configcol) {
                        buildStr = buildStr + '<tr><td style="padding:5px;word-break: keep-all;">' + key + '：</td>';
                        buildStr = buildStr + '<td style="padding:5px;">' + configcol[key] + '</td></tr>';
                    };
                }
                buildStr = buildStr + '</tbody></table>';
                $body.html(buildStr).css({
                    'visibility': 'visible'
                }); //渲染完成后显示
            }
        }

    },
    /**
     * 雷达图---radar
     */
    //数据项--定义为函数，防止被外部修改
    radar_option() {
        return [{
                "showName": "系列名称",
                "name": "series",
                "value": "XX数据",
                "desc": '定义系列数据的名称，当鼠标移到图上会显示。如：告警数据'
            },
            {
                "showName": "固定图例",
                "name": "legend",
                "value": "['数据1', '数据2']",
                "desc": "固定方式定义饼图中数据种类的名字，数组格式，使用单引号，如：['数据1', '数据2']"
            },
            {
                "showName": "图例键值",
                "name": "legendkey",
                "value": "",
                "desc": "定义数据组使用数据源时，作为图例名称的键值，如：clevel"
            },
            {
                "showName": "数据来源",
                "name": "data",
                "value": "[{value: 335, name: '数据1'},{value: 310, name: '数据2'}]",
                "desc": "定义数据来源，可写定数据，也可选择数据源，如：[{value: 335, name: '数据1'},{value: 310, name: '数据2'}] 或者 pie-data=>value"
            },
            {
                "showName": "图例颜色",
                "name": "legendColor",
                "value": "{'数据1':'red', '数据2':'green'}",
                "desc": "固定方式定义图例的颜色，颜色支持标准css颜色，如：{'数据1':'red', '数据2':'green'}"
            }, {
                "showName": "图例颜色键值",
                "name": "colorKey",
                "value": "",
                "desc": "定义数据组使用数据源时，作为图例颜色的键值，如：color"
            }

        ];
    },
    //加载器
    radar_loader() {
        var $head = this.$content.find(".graph-header");
        var $body = this.$content.find(".graph-bodyer");
        var opt = this.configOption["option"];
        //整体样式
        var $chart = this.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : ""
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        //头部
        $head.css({}).text(this.configOption["chartName"]);
        $body.css({
            'width': "100%",
            'height': "90%"
        }).empty();
        var self = this;

        var legend = [];
        var indicator = [];
        var data = [];
        //渲染图形
        var option = {
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "",
            legend: {
                data: legend
                    //['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
            },
            radar: {
                indicator: indicator
                    //  [
                    //     { name: '销售（sales）', max: 6500},
                    //     { name: '管理（Administration）', max: 16000},
                    //     { name: '信息技术（Information Techology）', max: 30000},
                    //     { name: '客服（Customer Support）', max: 38000},
                    //     { name: '研发（Development）', max: 52000},
                    //     { name: '市场（Marketing）', max: 25000}
                    //  ]
            },
            series: [{
                name: '',
                type: 'radar',
                data: data
                    //  [
                    //      {
                    //          value : [4300, 10000, 28000, 35000, 50000, 19000],
                    //          name : '预算分配（Allocated Budget）'
                    //      },
                    //       {
                    //          value : [5000, 14000, 28000, 31000, 42000, 21000],
                    //          name : '实际开销（Actual Spending）'
                    //      }
                    //  ]
            }],
            color: [
                '#00acee',
                '#52cdd5',
                '#79d9f1',
                '#a7e7ff',
                '#c8efff'
            ]
        };
        var chart = echarts.init($body[0]);

        function loadRadar() {
            chart.setOption(option);
        }

        function setData() {
            data = [];
            legend = [];
            indicator = [];
            var legendColor = [];
            if (opt["legendColor"] && opt["legendColor"] != "") {
                if (opt["data"].indexOf("[") == 0) {
                    legendColor = eval("(" + opt["legendColor"] + ")");
                }
            }
            //图例数据
            if (opt["legend"] && opt["legend"] != "") {
                if (opt["data"].indexOf("[") == 0) {
                    legend = eval("(" + opt["legend"] + ")");
                }
            }
            //系列数据
            if (opt["data"] && opt["data"] != "") {
                //写死的数据
                if (opt["data"].indexOf("[") == 0) {
                    data = eval("(" + opt["data"] + ")");
                    if (legendColor) {
                        for (var i = 0; i < data.length; i++) { //数组长度由图例图例决定
                            if (data[i]["name"] in legendColor) {
                                data[i].itemStyle = {
                                    normal: {
                                        color: legendColor[data[i]["name"]]
                                    }
                                };
                            }
                        }
                    }
                    loadRadar();
                } else {
                    //获取初始数据
                    self.getData(opt["data"], function(result) {
                        var id_key = opt["data"];
                        var key = id_key.split(".")[1];
                        var legendkey = opt.legendkey;
                        var colorKey = opt.colorKey;
                        //根据legend图例重新组装系列数据
                        if (legend.length > 0) { //固定图例
                            for (var i = 0; i < legend.length; i++) { //数组长度由图例图例决定
                                legendkey = legend[i];
                                var value = result.filter(function(v) {
                                    var result = false;
                                    //遍历行值，如果存在返回该行
                                    for (var col in v) {
                                        if (v[col] == legendkey) {
                                            result = true;
                                        }
                                    }
                                    return result;
                                })[0][key];
                                var item = {
                                    "value": value,
                                    "name": legendkey
                                };
                                if (legendColor && (legendkey in legendColor)) {
                                    item.itemStyle = {
                                        normal: {
                                            color: legendColor[legendkey]
                                        }
                                    }
                                }
                                data.push(item);
                            }
                        } else { //动态图例
                            for (var i = 0; i < result.length; i++) { //数组长度由图例图例决定
                                var item = {
                                    "value": result[i][key],
                                    "name": result[i][legendkey]
                                };
                                if (colorKey && colorKey != '') { //指定图例颜色key
                                    item.itemStyle = {
                                        normal: {
                                            color: result[i][colorKey]
                                        }
                                    }
                                }
                                legend.push(result[i][legendkey]);
                                data.push(item);
                            }
                        }
                        loadRadar();
                    });
                }
            }
        }
        this.setTimer(self.configOption, $body, setData, this);
    },

    device_option() {
        return [{
            "showName": "数据",
            "name": "value",
            "value": "",
            "desc": '文本框数据，可写固定数字，或者从数据源选择，如:200或者text-data=>value'
        }, {
            "showName": "得分字段键值",
            "name": "scoreKey",
            "value": "",
            "desc": '评分字段在数据中的键值。'
        }];
    },
    //加载器
    device_loader() {
        var self = this;
        var $head = this.$content.find(".graph-header");
        var $body = this.$content.find(".graph-bodyer");
        var $foot = this.$content.find(".graph-footer");
        var opt = this.configOption["option"];
        //整体样式
        var $chart = this.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "background-color:#DDD"
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        //头部
        $head.text(this.configOption["chartName"]);
        //设置数据
        function setData() {
            self.getData(opt["value"], function(data) {
                if (!data || data.length == 0) {
                    $body.text("无数据");
                    return false;
                }
                var ran = Math.floor(Math.random() * 25);
                var healthvalue = data[0][opt["scoreKey"]];
                if (!healthvalue) healthvalue = 0;
                var healthColor = "green";
                if (healthvalue < 80) {
                    healthColor = "red";
                } else if (healthvalue < 90) {
                    healthColor = "yellow";
                }
                var deviceDiv = "              <div class=\"onebusiness a1 " + healthColor + "\" style=\"width:100%;\">\n" +
                    "              <div>" +
                    "                  <div class=\"gear\" style=\"width:35%\">\n" +
                    "                    <div class=\"svgcircle-big\" style=\"\"></div>\n" +
                    "                    <div class=\"svgcircle-small\" style=\"\"></div>\n" +
                    "                  </div><div class=\"health\" style=\"width:40%;cursor:pointer;\"><span>健康度</span>\n" +
                    "                    <span id=\"healthvalue\" style=\"font-size: 32.2105px;\">" + healthvalue + "</span>\n" +
                    "                  </div>\n" +
                    "              </div>" +
                    "                  <div class=\"resources\" style=\"width: 100%;\">\n" +
                    "<table class=\"table table-hover table-striped\"><tbody>";
                var array = [];
                for (var k in data[0]) {
                    if (k == opt["scoreKey"]) {
                        continue;
                    }
                    var v = data[0][k];
                    if (!v) {
                        v = 0;
                    }
                    array.push(k + "：" + v);
                }
                //根据开头排序
                array.sort(function(a, b) {
                    return a.charAt(0) - b.charAt(0);
                });
                for (var i = 0; i < array.length; i++) {
                    if (i % 2 == 0) {
                        deviceDiv = deviceDiv + "<tr>";
                    }

                    deviceDiv = deviceDiv + "<td style=\"font-size: 12px;\">" + array[i].substr(1) + "</td>";
                    if (i % 2 == 1) {
                        deviceDiv = deviceDiv + "</tr>";
                    }
                }
                deviceDiv = deviceDiv + "</tbody></table> </div>\n</div>\n";

                $body.empty();
                $body.append($(deviceDiv));
            });
        }
        this.setTimer(this.configOption, $body, setData, this);
    },
    //业务概览加载器
    business_loader() {
        var self = this;
        var $head = self.$content.find(".graph-header");
        var $body = self.$content.find(".graph-bodyer");
        var $foot = self.$content.find(".graph-footer");
        var opt = self.configOption["option"];
        //整体样式
        var $chart = self.$content;
        var colorSet = {
            'color': opt["fontColor"] ? opt["fontColor"] : "",
            'backgroundColor': opt["backgroundColor"] ? opt["backgroundColor"] : "background-color:#DDD"
        };
        $chart.css(colorSet);
        $chart.find("a").css(colorSet);
        //头部
        $head.text(self.configOption["chartName"]);
        //设置数据
        function setData() {
            self.getData(opt["value"], function(data) {
                if (!data || data.length == 0) {
                    $body.text("无数据");
                    return false;
                }
                let ran = Math.floor(Math.random() * 25);
                let health_rate = data[0][opt["health_rateKey"]];
                let busy_rate = data[0][opt["busy_rateKey"]];
                let health = data[0][opt["healthKey"]];
                let colKey = data[0][opt["colKeyKey"]];
                let colNum = data[0][opt["colNumKey"]];
                let sysmapid1 = eval('(' + opt['params'] + ')')['sysmapid']
                const sysmapid = sysmapid1;
                health_rate = health_rate || 0;
                busy_rate = busy_rate || 0;
                health = health || 0;
                colKey = colKey || '';
                colNum = colNum || 0;
                let healthColor = "green";
                if (health < 80) {
                    healthColor = "red";
                } else if (health < 90) {
                    healthColor = "yellow";
                }
                // var businessDiv = "<div class=\"onebusiness a1 " + healthColor + "\" style=\"width:100%;\">\n" +
                //     "              <div>" +
                //     "                  <div class=\"gear\" style=\"width:35%\">\n" +
                //     "                    <div class=\"svgcircle-big\" style=\"\"></div>\n" +
                //     "                    <div class=\"svgcircle-small\" style=\"\"></div>\n" +
                //     "                  </div><div class=\"health\" style=\"width:40%;cursor:pointer;\"><span>健康度</span>\n" +
                //     "                    <span id=\"healthvalue\" style=\"font-size: 32.2105px;\">" + healthvalue + "</span>\n" +
                //     "                  </div>\n" +
                //     "              </div>" +
                //     "                  <div class=\"resources\" style=\"width: 100%;\">\n" +
                //     "<table class=\"table table-hover table-striped\"><tbody>";
                let businessDiv = "<div style=\"width:100%;text-align: center;\">\n" +
                    "      <div style=\"width:100%;float:left;text-align: center;background-color: #DDA0DD;border: 1px solid #e3e3e3; \" >\n" +
                    "        <div class=\"gear onebusiness " + healthColor + "\" style=\"width:35%;float:left;\">\n" +
                    "          <div class=\"svgcircle-big\" style=\"\"></div>\n" +
                    "          <div class=\"svgcircle-small\" style=\"\"></div>\n" +
                    "        </div>\n" +
                    "        <div class=\"health\"  style=\"cursor:pointer;width:20%;float:left;padding-top:50px;\">\n" +
                    "          <div style=\"\">健康指数</div>\n" +
                    "          <div style=\"\">\n" +
                    "            <span style=\"font-size: 36px;\">" + health + "</span>\n" +
                    "          </div>\n" +
                    "        </div>\n" +
                    "        <div class=\"warnning\" style=\"width:40%;float:left;\">\n" +
                    "          <div id=\"warnning" + sysmapid + "\" style=\"height:200px;width:100%;\"></div>\n" +
                    "        </div>\n" +
                    "      </div>\n" +
                    "      <div style=\"width:100%;float:left;border: 1px solid #e3e3e3;margin-bottom: 10px;padding:10px 0;\">\n" +
                    "        <div style=\"width:30%;float:left;\">\n" +
                    "          <div id='health_rate_progress" + sysmapid + "'></div>\n" +
                    "          <div>\n" +
                    "            <span>健康度</span>\n" +
                    "          </div>\n" +
                    "        </div>\n" +
                    "        <div style=\"width:30%;float:left;\">\n" +
                    "          <div id='busy_rate_progress" + sysmapid + "'></div>\n" +
                    "          <div>\n" +
                    "            <span>繁忙度</span>\n" +
                    "          </div>\n" +
                    "        </div>\n" +
                    "        <div style=\"float:left;width:0.1%;height:100px;background-color:#e3e3e3\"></div>\n" +
                    "        <div style=\"width:39.9%;float:left;\">\n" +
                    "          <ul style=\"width:100%; height:100px;  overflow-y: auto; text-align: left;\">\n";
                let array = [];
                for (let k in data[0]) {
                    if (k.startsWith(colKey)) {
                        let val = {};
                        for (let i = 0; i < colNum; i++) {
                            if (k == (colKey + '' + i)) {
                                val['index'] = i;
                                val['deviceName'] = data[0][k].split('_')[0];
                                val['deviceNum'] = data[0][k].split('_')[1];
                                array.push(val);
                                break;
                            }
                        }
                    }
                }
                //根据开头排序
                array.sort(function(a, b) {
                    return a.index - b.index;
                });
                for (let i = 0; i < array.length; i++) {
                    let val = array[i];
                    let businessDiv1_1 =
                        "            <li style=\"padding:5px 10px;\">\n" +
                        "              <span class=\"deviceName\">" + val['deviceName'] + ":</span>\n" +
                        "              <span class=\"deviceNum\">" + val['deviceNum'] + "</span>\n" +
                        "              <span class=\"unit\">台</span>\n" +
                        "            </li>  \n";
                    businessDiv += businessDiv1_1
                }

                businessDiv += " </ul>\n </div>\n </div>\n </div>";

                $body.empty();
                $body.append($(businessDiv));

                function myecharts() {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init($body.find('#warnning' + sysmapid)[0])

                    let option = {
                        xAxis: [{
                            type: 'value',
                            min: 0,
                            max: 3,
                            interval: 1,
                            axisLabel: {
                                margin: 2
                            },
                            // axisTick: {
                            //   alignWithLabel: true,
                            //   length: 1
                            // }
                        }],
                        yAxis: [{
                            type: 'category',
                            // splitNumber :3,
                            boundaryGap: true,
                            axisTick: {
                                alignWithLabel: true,
                                interval: 0,
                                length: 1
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 12,
                                margin: 3
                            },
                            data: ['普通', '重要', '关键']
                        }],
                        series: [{
                            type: 'bar',
                            data: [0, 0, 0]
                        }]
                    };
                    myChart.setOption(option);
                }
                myecharts();
                //进度条初始化
                $('#health_rate_progress' + sysmapid).radialIndicator({
                    barWidth: 6,
                    initValue: health_rate,
                    roundCorner: true,
                    percentage: true,
                    barColor: {
                        0: '#FF0000',
                        33: '#FFFF00',
                        66: '#0066FF',
                        100: '#33CC33'
                    }
                });
                $('#busy_rate_progress' + sysmapid).radialIndicator({
                    barWidth: 6,
                    initValue: busy_rate,
                    roundCorner: true,
                    percentage: true,
                    barColor: {
                        0: '#FF0000',
                        33: '#FFFF00',
                        66: '#0066FF',
                        100: '#33CC33'
                    }
                });
            });
        }
        self.setTimer(self.configOption, $body, setData, self);
    },
    /**
     * 获取数据源数据 func_getData
     *
     * @param key 格式 dsID=>键值
     * @param callback 回调函数
     */
    getData(key, callback, keyIndex, scope, params) {

        function callfunc(result) {
            if (callback) {
                callback.call(scope, result, key, keyIndex);
            }
        }
        if (!key || key == "" || key == "[]" || key == "{}") {
            callfunc([]);
        } else if ((typeof key) == 'object') {
            var result = key;
            key = JSON.stringify(key);
            callfunc(result);
        } else if (key.indexOf(".") < 0) {
            callfunc(eval("(" + key + ")"));
        } else {
            if (!params) {
                params = this.params;
            }
            if (key.indexOf("item-trend") >= 0) {
                api.itemTrend(params["itemid"], params["startTimeStamp"], params["endTimeStamp"]).then((response) => {
                    callfunc(response.data);
                }).catch((err) => {
                    console.error(err);
                });
            } else {
                api.viewData(key, params).then((response) => {
                    callfunc(response.data);
                }).catch((err) => {
                    console.error(err);
                });
            }

        }

    },
    /**
     * 格式化提取key中指定的键值对应的数据
     *
     * @param  {[type]} result [description]
     * @param  {[type]} key    [description]
     * @return {[type]}        [description]
     */
    formatKeytoData(result, keystr) {
        /**
         * 格式化数据
         * @param  {[type]} str [description]
         * @return {[type]}     [description]
         */
        function format(str) {
            //时间格式转换
            if ((typeof str) == "object" || (typeof str) == "function") {
                return str;
            } else {
                str = "" + str + "";
            }

            if ((str.length == 10 || str.length == 13) && (!isNaN(str))) {
                if (str.length == 10) {
                    str = str * 1000;
                }
                str = "" + str + "";
                if (str.indexOf("+") > 0) {
                    str = str.substring(0, str.indexOf("+"));
                } else if (str.indexOf("-") > 0) {
                    str = str.substring(0, str.indexOf("-"));
                }
                var date = new Date(parseInt(str, 10));
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
            } else {
                return str;
            }
        }

        //如果result已经是数组，转换格式后直接返回

        //转换为数组
        var keyArray = keystr.split(".");
        var resultArray = [];
        var val = 0;
        var key = "";
        if (keyArray.length == 2) {
            key = keyArray[1];
        } else {
            key = keystr;
        }
        var value;
        for (var ri = 0; ri < result.length; ri++) {
            //如果result 子元素是对象，根据key获取对象组装数组
            if ((typeof(result[ri]) == 'object')) {
                var wordArray = key.split(",");
                if (wordArray.length == 1) {
                    value = (key.indexOf(">>DATE") > 0) ? format(result[ri][key.replace(">>DATE", "")]) : result[ri][key];
                } else {
                    var obj = {};
                    for (var wi = 0; wi < wordArray.length; wi++) {
                        obj[wordArray[wi].replace(">>DATE", "")] = (wordArray[wi].indexOf(">>DATE") > 0) ? format(result[ri][wordArray[wi].replace(">>DATE", "")]) : result[ri][wordArray[wi]];
                    }
                    value = obj;
                }
            } else { //直接转换数据
                value = result[ri];
            }
            resultArray.push(value); //
        }
        return resultArray;
    },
    /**
     * 生产 UUID
     * @returns {string}
     * @constructor
     */
    UUID() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";

        var uuid = s.join("");
        return uuid;
    },
    /**
     * 插入时间选择条
     *
     * 时间选择控件的js和css都集成到了gridster里面
     *
     */
    generateDatePicker($el) {
        var dateHtml = '<div class="rangerPicker"><form><select class="custom-date" name="select" style="float: right;position:absolute;top:30px;right:10px;z-index:99"><option value="1h">1小时</option><option value="6h">6小时</option><option value="12h">12小时</option><option value="1">1天</option> <option value="3"  >3天</option> <option value="7">7天</option> <option value="30">1个月</option><option value="custom">自定义</option> </select> </form></div>';
        var $date = $(dateHtml);
        $el.append($date);

        var picker = $date.find('.custom-date').dateRangePicker();
        return picker;
    },
    /**
     * 获取外部传入的参数值
     *
     * @param  {[type]} paramKey 格式为 #{keyname}
     * @return {[type]}          [description]
     */
    getParam(paramKey) {

        if (paramKey && paramKey != '' && (typeof paramKey) == 'string' && (paramKey.indexOf("#{") >= 0)) {
            paramKey = paramKey.substr(2, paramKey.length - 3);

            if (this.params && (paramKey in this.params)) {
                var valueObj = this.params[paramKey];
                if ((typeof valueObj) == 'function') {
                    return valueObj.call(this);
                } else {
                    return valueObj;
                }
            } else if (this.params && (this.params.length > 0)) {
                var valueArray = [];

                for (var i = 0; i < this.params.length; i++) {
                    if (this.params[i] && (paramKey in this.params[i])) {
                        valueArray.push(this.params[i][paramKey]);
                    }
                }
                return valueArray;
            } else {
                console.warn("未找到图形需要的参数【" + paramKey + "】");
                return paramKey;
            }
        } else {
            return paramKey;
        }
    },

    /**
     * 设置定时器
     *
     * @param opt 图形表单配置信息
     * @param $ele 需要定时的节点
     * @param func 定时执行的函数
     */
    setTimer(opt, $ele, func, scope) {
        var isRes = opt["refFlag"]; //是否刷新
        var refMs = opt["refMs"]; //刷新间隔
        //实时执行一次函数
        func.call(scope, false); //首次调用，非循环标志
        //设置定时器
        if (isRes == '1') {
            var self = this;
            var nowEleId = "#" + self.contentId;
            //清除之前的定时器
            self.clearTimer($ele);
            //设置新定时器
            var timerId = setInterval(function() {
                //如果页面上不存在画板元素，清空定时器
                if ($(nowEleId).length == 0) {
                    window.clearInterval(timerId);
                } else {
                    func.call(this, true); //循环调用标志
                }
            }, parseInt(refMs));
            //绑定定时器ID到元素上----在画布销毁的时候清除定时器
            $ele.data("timerId", timerId);
        }
    },
    /**
     * 清除之前的定时器
     * @param $ele
     */
    clearTimer($ele) {
        var oldTimer = $ele.data("timerId");
        if (oldTimer) {
            window.clearInterval(oldTimer);
        }
    },


    /**
     * 清除所有graph-bodyer上面的定时器
     *
     * @param $parent
     */
    clearAllTimer() {
        var self = this;
        $(".graph-bodyer").each(function() {
            self.clearTimer($(this));
        });
    },
    /**
     * 获取加载器列表
     */
    getLoaderList() {
        return this.LOADER_LIST;
    },
    /**
     * 获取加载器配置项
     * @param loaderName
     */
    getLoaderOption(loaderName, option) {
        if (!loaderName) return [];
        var cmd = "this." + loaderName + "_option()";
        try {
            var configArray = eval(cmd);
            if (configArray && configArray.length) {
                configArray = configArray.concat(this.PUBLIC_OPTION);
            } else {
                console.log("未找到加载器配置信息：" + loaderName)
                return [];
            }
            if (option && option.length && option.length > 0) {
                for (var i = 0; i < option.length; i++) {
                    for (var j = 0; j < configArray.length; j++) {
                        if (option[i]["name"] == configArray[j]["name"]) {
                            configArray[j] = option[i];
                        }
                    }
                }
            }
            return configArray;
        } catch (e) {
            console.log("读取加载器配置信息出错：" + e)
        }
    },
    /**
     * 深拷贝对象
     * @param  {[type]} source [description]
     * @return {[type]}        [description]
     */
    deepCopy(source) {
        var result = {};
        for (var key in source) {
            result[key] = typeof source[key] === 'object' ? this.deepCopy(source[key]) : source[key];
        }
        return result;
    },
    /**
     * 绑定关联图形（除表格以外都适用）
     * @param  {Function} callback [description]
     * @return {[type]}            [description]
     */
    bindDailog(callback) {
        var opt = this.configOption["option"];
        var grsNo = opt["relaNo"];
        if (grsNo) {
            callback.call(this, grsNo, opt["params"]);
        }
    },
    /**
     * 展示详细信息弹出框
     *
     * @return {[type]} [description]
     */
    detailDialog(relaUrl, params) {
        var dialog = require('artDialog');
        //
        // var e = e || window.event;
        // var tar = e.target || e.srcElement;
        if (relaUrl.charAt(0) == "/") {
            var url = relaUrl + ((relaUrl.indexOf("?") > 0) ? '&' : '?') + 'params=' + params;
        } else if (relaUrl.indexOf("to:") == 0) {
            var url = relaUrl.replace("to:", "") + ((relaUrl.indexOf("?") > 0) ? '&' : '?') + 'params=' + params;
            window.location.href = url;
            return false;
        } else {
            var url = '/dirms/#/graph?grsNo=' + relaUrl + '&params=' + params;
        }
        var d = dialog({
            title: '  ',
            url: url,
            width: '70vw',
            height: '70vh',
            onshow: function() {
                $(".ui-popup").css("width", "initial");
            }
        }); //,follow:tar
        d.showModal();
    }



}